<style media="screen">
.head-container{
  position: relative;
  padding: 10px 0 14px;
  border-bottom: 1px solid #E3E3E5;
}
.head-container .mes{
  overflow: hidden;
  margin-right: 10px;
  float: left;
}
.head-container .mes p{
  font-size: 12px;
  color:#CFCFCF;
  margin-bottom: 6px;
}
.head-container .mes input{
  width: 160px;
  height: 34px;
}
.head-container .flow{
  float: left;
  margin-right: 10px;
}
.head-container .flow p{
  font-size: 12px;
  color:#CFCFCF;
  margin-bottom: 6px;
}
.head-container .flow .flow-select{
  width: 140px;
  height: 34px;
}
.head-container .button-group{
  padding-top: 23px;
}
.expenses-content div:hover {
    background-color: #F0F0F7;
}
.bill-statistics .item{
  display: flex;
  align-items: center;
  width: 300px;
  height: 44px;
  border-radius: 4px;
  box-shadow: 0px 0px 4px 0px rgba(208,218,226,0.5);
  overflow: visible;
}
.bill-statistics .item .icon{
  clear: both;
  font-size: 14px;
  margin-right: 6px;
  height: auto;
  margin-top:0px;
}
.bill-statistics .item .name{
  clear: both;
}
.bill-statistics .item001{
  background: rgba(109,122,226,0.3);
}
.bill-statistics .item001 i{
  color:rgba(109,122,226,1);
}
.bill-statistics .item001 .name{
  font-size: 18px;
  color:rgba(109,122,226,1);
}
.bill-statistics .item001 .name span{
  margin-right: 10px;
  font-size: 14px;
  color:rgba(109,122,226,0.6);
}

.bill-statistics .item002{
  background: rgba(92,159,243,0.3);
}
.bill-statistics .item002 i{
  color:rgba(92,159,243,1);
}
.bill-statistics .item002 .name{
  font-size: 18px;
  color:rgba(92,159,243,1);
}
.bill-statistics .item002 .name span{
  margin-right: 10px;
  font-size: 14px;
  color:rgba(92,159,243,0.6);
}

.bill-statistics .item003{
  background: rgba(255,171,38,0.3);
}
.bill-statistics .item003 i{
  color:rgba(255,171,38,1);
}
.bill-statistics .item003 .name{
  font-size: 18px;
  color:rgba(255,171,38,1);
}
.bill-statistics .item003 .name span{
  margin-right: 10px;
  font-size: 14px;
  color:rgba(255,171,38,0.6);
}
.bill-statistics .item004{
  background: rgba(145,188,84,0.3);
}
.bill-statistics .item004 i{
  color:rgba(145,188,84,1);
}
.bill-statistics .item004 .name{
  font-size: 18px;
  color:rgba(145,188,84,1);
}
.bill-statistics .item004 .name span{
  margin-right: 10px;
  font-size: 14px;
  color:rgba(145,188,84,0.6);
}
.bill-statistics .item005{
  background: rgba(243,144,92,0.3);
}
.bill-statistics .item005 i{
  color:rgba(243,144,92,1);
}
.bill-statistics .item005 .name{
  font-size: 18px;
  color:rgba(243,144,92,1);
}
.bill-statistics .item005 .name span{
  margin-right: 10px;
  font-size: 14px;
  color:rgba(243,144,92,0.6);
}
.bill-statistics .item006{
  background: rgba(254,33,33,0.3);
}
.bill-statistics .item006 i{
  color:rgba(254,33,33,1);
}
.bill-statistics .item006 .name{
  font-size: 18px;
  color:rgba(254,33,33,1);
}
.bill-statistics .item006 .name span{
  margin-right: 10px;
  font-size: 14px;
  color:rgba(254,33,33,0.6);
}
.znjMore{
  position: absolute;
  right: 15px;
  top: 15px;
}
.item006 ul{
  display: none;
  width: 300px;
  background: #ffffff;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  box-shadow: 0px 2px 6px 0px rgba(209,209,209,0.5);
  position: absolute;
  top: 44px;
  left: 0px;
  z-index: 99999;
}
.item006 ul li{
  line-height: 40px;
  font-size: 14px;
  text-indent: 26px;
}
.item006 ul li span{
  color: #FE2121;
  font-weight: 600;
  margin-left: 20px;
}
.item006:hover ul{
  display: block;
}
.hl-page-header__operation{
  float:left;
}
.hl-page-header__operation .second-tab-title{
  color:rgb(102, 102, 102);
  font-size:16px;
  font-weight:bolder;
  float:left;
  margin-left:20px;
  color: #999;
}
</style>

<section id="expIndex">
  <hl-page-header title="收支流水">
    <div class="second-tab-title cursor" @click="goToCurSsMx">当日实收明细</div>
  </hl-page-header>

  <div>
    <div class="head-container clearfix">
      <div class="clearfix">
        <div class="mes">
          <p>信息搜索</p>
          <div class="global_search">
            <span class="icon-Gm-search"></span>
            <input
              autocomplete="off"
              type="text"
              class="global_ipt_text js-client-name"
              placeholder="客户"
              v-model="khname"
              @keyup.enter="getData(1)"
              style="width:220px"
             />
          </div>
        </div>


        <div class="flow">
          <p>费项</p>
					<hl-select :data="cTdata" v-model="expenseName" :width="140" @on-change="handleSelectedExpense"></hl-select>
        </div>

        <div class="button-group" v-show="!isExtenseFlag">
          <hl-button @on-click="search" size="mini">查询</hl-button>
          <hl-button @on-click="resetBtn" size="mini">重置</hl-button>
        </div>
      </div>

      <div class="mt-10 clearfix" v-show="isExtenseFlag">
        <div class="flow">
          <p>付款截止日</p>
          <div class="pull-left">
            <web-calendar v-model="fkbegintime" tips="起始时间" width="140"></web-calendar>
          </div>
          <span style="width:20px;" class="text-center line-height-34 pull-left">-</span>
          <div class="pull-left">
            <web-calendar v-model="fkendtime" tips="起始时间" width="140"></web-calendar>
          </div>
        </div>

        <div class="flow">
          <p>收支时间</p>
          <div class="pull-left">
            <web-calendar v-model="szbegintime" tips="起始时间" width="140"></web-calendar>
          </div>
          <span style="width:20px;" class="text-center line-height-34 pull-left">-</span>
          <div class="pull-left">
            <web-calendar v-model="szendtime" tips="起始时间" width="140"></web-calendar>
          </div>
        </div>
      </div>

			<div class="mt-10" v-show="isExtenseFlag">
				<div>
					<div class="flow">
					  <p class="color-cfcfcf">项目</p>
					  <hl-select :data="projectList" v-model="projectId" :width="220" @on-change="getGroupPrimaryData"></hl-select>
          </div>
          <div class="flow">
            <p>组合</p>
            <hl-cascader :selected="selectedGroupData" :width="220" :primary-data="groupOneData" :secondary-data="groupTwoData" :tertiary-data="groupThreeData" @on-primary-change="selectOneGroup" @on-secondary-change="selectTwoGroup" @on-tertiary-change="selectThreeGroup"></hl-cascader>
          </div>
					<div class="flow">
					  <p class="color-cfcfcf">楼宇</p>
					  <hl-select :data="buildingList" v-model="buildingId" :width="140" @on-change="getbuildingId"></hl-select>
					</div>
					<div class="flow">
					  <p class="color-cfcfcf">楼层</p>
					  <hl-select :data="floorList" v-model="floorId" :width="140" @on-change="getfloorId"></hl-select>
					</div>
					<div class="flow" style="margin-right: 24px;">
					  <p class="color-cfcfcf">单元</p>
					  <hl-select :data="unitList" v-model="unitId" :width="140" @on-change="getunitId"></hl-select>
					</div>
				</div>
				<div class="button-group pull-left">
          <hl-button @on-click="search" size="mini">查询</hl-button>
          <hl-button @on-click="resetBtn" size="mini">重置</hl-button>
				</div>
			</div>

      <div class="global_open_sign" @click="openSearch">
        <span v-if="!isExtenseFlag">更多筛选项</span>
        <span v-if="isExtenseFlag">收起筛选项</span>
      </div>
    </div>
  </div>
  <div class="global_screening_container">
    <div class="relative clearfix" style="width: 50%;">
      <div class="pull-left" style="margin-right: 45px;">
        <ul>
          <b class="mr-10" style="lineHeight:54px;float:left;">支付状态</b>
          <hl-checkbox-button style="float:left" :data="billPaymentStateData" v-model="selectedPaymentStateCode" @on-click="selectBillMenu" merge></hl-checkbox-button>
        </ul>
      </div>
    </div>
    <div class="clearfix">
      <div class="pull-left" style="margin-right: 45px;">
        <ul>
          <b class="mr-10" style="lineHeight:54px;float:left;">逾期情况</b>
          <hl-checkbox-button style="float:left" :data="billOverTypeData" v-model="selectedOverStateCode" @on-click="selectBillMenu" merge></hl-checkbox-button>
        </ul>
      </div>
    </div>
  </div>
  <div class="global_screening_container">
    <div class="clearfix">
      <div class="pull-left dy-flex" style="align-items: center;">
        <ul>
          <b class="mr-10" style="lineHeight:54px;float:left;">减免情况</b>
          <hl-checkbox-button style="float:left" :data="breaksData" v-model="selectedBreaksCode"  @on-click="selectBillMenu" merge></hl-checkbox-button>
        </ul>
        <span class="global_refresh_icon icon-uniE94B" @click="resetTabbar" style="bottom:0px;left:334px;"></span>
      </div>
    </div>
  </div>




   <!-- 统计数据 -->
   <div class="ptb-10 dy-flex bill-statistics">
    <div class="item item001">
      <i class="icon-Nav-finance-amount icon"></i>
      <span class="name"><span>合计应收(元)</span>{{bill.totalReceived | formatNum}}</span>
    </div>
    <div class="item item002">
      <i class="icon-Nav-finance-amount icon"></i>
      <span class="name"><span>合计减免(元)</span>{{bill.totalDerate | formatNum}}</span>
    </div>
    <div class="item item003">
      <i class="icon-Nav-finance-amount icon"></i>
      <span class="name"><span>合计结转(元)</span>{{bill.totalCarrayOver | formatNum}}</span>
    </div>
  </div>
  <div class="pb-10 dy-flex bill-statistics">
    <div class="item item004">
      <i class="icon-Nav-finance-amount icon"></i>
      <span class="name"><span>合计已收(元) </span> {{bill.totalPayed | formatNum}}</span>
    </div>
    <div class="item item005">
      <i class="icon-Nav-finance-amount icon"></i>
      <span class="name"> <span>合计未收(元)</span>  {{bill.totalRest | formatNum}}</span>
    </div>
    <div class="item item006 relative" v-if="bill.lateFeeCalculateOpenFlag == 'Y'">
      <i class="icon-Nav-finance-amount icon"></i>
      <span class="name"> <span>应收滞纳金(元)</span>  {{bill.totalLateFeeReceived | formatNum}}</span>
      <i class="icon-predict-more znjMore" style="color:#fff" ></i>
      <ul class="">
        <li class="border-b color-999">
          减免滞纳金(元)<span>{{bill.totalLateFeeDerate | formatNum}}</span>
        </li>
        <li class="border-b color-999">
          已收滞纳金(元)<span>{{bill.totalLateFeePay | formatNum}}</span>
        </li>
        <li class="color-999">
          未收滞纳金(元)<span>{{bill.totalLateFeeRest | formatNum}}</span>
        </li>
      </ul>
    </div>
  </div>

  <div class="br-4 bill-line-height expenses-table global_table" style="border:1px solid #E5E5E5">
    <div class="clearfix dy-flex text-center global_table_title">
      <div class="dy-fx-1">序</div>
      <div class="dy-fx-2">费项</div>
      <div class="dy-fx-3">账单编号</div>
      <div class="dy-fx-2">客户</div>
      <div class="dy-fx-2">项目名</div>
      <div class="dy-fx-2 ellipsis-1">账单金额(元)</div>
      <div class="dy-fx-2 ellipsis-1">已发生金额(元)</div>
      <div class="dy-fx-2 ellipsis-1">账单余额(元)</div>
      <div class="dy-fx-2 ellipsis-1">账单状态</div>
      <div class="dy-fx-3 ellipsis-1">距到期天数</div>
      <div class="dy-fx-1 border-l">操作</div>
    </div>
    <div class="js-expenses-content expenses-content text-center css-overflow">
      <div class="border-t dy-flex clearfix global_table_item js-expenses-item" v-for="(item, index) in data">
        <div class="dy-fx-1 ellipsis-1">{{index + 1
            < 10 ? '0' + (index + 1) : index + 1 }}</div>
        <div class="dy-fx-2 ellipsis-1" :title="item.name">
          {{item.name ? item.name : '--'}}
        </div>
        <div class="dy-fx-3 ellipsis-1" :title="item.billNo">
          {{item.billNo ? item.billNo : '--'}}
        </div>
        <div class="dy-fx-2 ellipsis-1" :title="item.zlfName">
          {{item.zlfName ? item.zlfName : '--'}}
        </div>
        <div class="dy-fx-2 ellipsis-1" :title="item.projectName">
          {{item.projectName? item.projectName : '--'}}
        </div>
        <div class="dy-fx-2 ellipsis-1" v-if="item.amountReceived">
          {{Number(item.amountReceived).toFixed(2) | formatNum}}
        </div>
        <div class="dy-fx-2 ellipsis-1" v-if="!item.amountReceived">0</div>
        <div class="dy-fx-2 ellipsis-1" v-if="item.amountPayed">
          {{Number(item.amountPayed).toFixed(2) | formatNum}}
        </div>
        <div class="dy-fx-2 ellipsis-1" v-if="!item.amountPayed">0</div>
        <div class="dy-fx-2 ellipsis-1">
          {{(Number(item.amountReceived) - Number(item.amountPayed)).toFixed(2) | formatNum}}
        </div>
        <div class="dy-fx-2 ellipsis-1">
          {{item.paymentState | billPaymentState}}
        </div>
        <div class="dy-fx-3 ellipsis-1 color-orange" :title="item.overdueDays | overDay">
          <span v-if="item.paymentState != 'APE'">{{item.overdueDays | overDay}}</span>
          <span v-if="item.paymentState == 'APE'">--</span>
        </div>
        <div class="dy-fx-1 border-l">
          <a target="_blank" :href="'#/billDetail?id='+item.billId+'&aid='+item.contractId+'&page=expensesManage&ddtab=true'" class="js-goTo">查看</a>
        </div>
      </div>
    </div>
  </div>

  <div class="user-page ptb-10 clearfix">
    <div class="pull-left user-page-num">
      <span class="font-14">共<i class="js-totalCount">{{totalCount}}</i>条记录</span>
      <span>每页<hl-select :data="pages" v-model="pageCount" width="80" @on-change="pagesFY"></hl-select>条</span>
    </div>
    <div class="pull-right">
      <hl-pagination v-model="currentPage" :total="totalPage" @change="getData"></hl-pagination>
    </div>
  </div>
</section>

<script src="modules/system_config/scripts/right_company.js" charset="utf-8"></script>
<script src="modules/bill/scripts/expenses_manage.js" charset="utf-8"></script>
